前回に引き続き 前回までで、データ一覧を表示するところはできました。 今回は最終仕上げ、一覧から編集ボタンを押し、データの編集画面に移動し、データの修正・削除。 一覧から、新規データ作成ボタンを押し、データの新規作成。 細かく説明すると非常に時間がかかるので、ソースコードを貼り付けるのをメインにします。 この記事は５回に分けて連載する、第５回の記事です。 ・第１回 Apollo Serverが動くところまで ・第２回 Apollo Server配下で、GraphQLを使って商品マスターにアクセスする ・第３回 フロントエンドをReact＋Redux＋graphql-requestを使って実装する ・第４回 フロントエンドからgraphql-requestを使って、データを取得・表示する ・第５回 graphql-requestを使って、データを登録・修正・削除する（この記事） ファイルツリー 今回も完成形のファイルツリーをまず示しておきます。 一覧画面の編集 変更箇所は「新規データ作成」ボタンを追加したところと、Reactが警告を出していたので、 明細業のデータに key を付与したところでしょうか。 [bash] $ nano components/product.js [/bash] [bash] import React from “react”; import {withRouter} from “react-router-dom”; import Menu from “./menu”; class Product extends React.Component { componentDidMount() { this.props.onInit(); } render(){ let {list_body, has_more, onClickEdit, onAddNew} = this.props; let lstBody = []; for (let i = 0 ; i < list_body.length ; i++){ let bd = list_body[i]; lstBody.push( {bd.id} {bd.product_name} {bd.price} onClickEdit(bd.id, this.props.history)}>編集 ); } return ( This is Product onAddNew(this.props.history)}>新規データ作成 {lstBody} ) } } export default withRouter(Product); [/bash] 一覧画面に対応するコンテナの編集 onClickEdit,onAddNew でページ遷移させるところが主な変更点。 [bash] $ nano containers/cproduct.js [/bash] [bash] import {connect} from “react-redux”; import {GraphQLClient} from “graphql-request”; import Product from “../components/product”; import {set_list_body, set_has_more} from “../actions/product”; const GET_PRODUCTS = ` query GetProducts ($offset: Int!, $limit: Int!){ getProducts(offset: $offset, limit: $limit){ has_more products { id product_name price } } } `; const HOST_ADDR = “http://localhost:4000”; let LIST_OFFSET = 0; let LIST_LIMIT = 100; const mapStateToProps = (state) => { return { list_body: state.product.list_body, has_more: state.product.has_more, } } const mapDispatchToProps = (dispatch) => { return { onInit: () => { LIST_OFFSET = 0; onLoadData(LIST_OFFSET, [], dispatch) }, onClickEdit: (id, history) => { history.push(“/product/edit/” + id); }, onAddNew: (history) => { history.push(“/product/add/none”); }, onLoadMore: (list_body) => { onLoadData(LIST_OFFSET, list_body, dispatch); }, } } const onLoadData = (offset, list_body, dispatch) => { const client = createClient(); let variables = {offset: offset , limit: LIST_LIMIT}; client.request(GET_PRODUCTS, variables).then(data => { let newList = list_body; for (let i=0; i < data.getProducts.products.length; i++){ newList = newList.concat(data.getProducts.products[i]); } dispatch(set_list_body(newList)); LIST_OFFSET += LIST_LIMIT; dispatch(set_has_more(data.getProducts.has_more)); }) } const createClient =() => { const client = new GraphQLClient(HOST_ADDR + “/graphql”, { headers: { “x-token”: “test-test”, }, }); return client; } const CProduct = connect(mapStateToProps, mapDispatchToProps)(Product) export default CProduct [/bash] データ編集画面 一覧画面から…

前回に続いて さて、ここからが本番です。本来ならば Apollo Clientを使うべきなのかもしれませんが、 私の個人的な見解では Apollo Client は相当使いづらいです。 なので、 graphql-request というパッケージを使って、 GraphQLの QueryとMutaionを行います。 サーバーサイドは GraphQLのリクエストさえ飛んでくれば処理できるのでそれで問題なしです！ 私はこのやり方が非常に気に入っています。 この記事は５回に分けて連載する、第４回の記事です。 ・第１回 Apollo Serverが動くところまで ・第２回 Apollo Server配下で、GraphQLを使って商品マスターにアクセスする ・第３回 フロントエンドをReact＋Redux＋graphql-requestを使って実装する ・第４回 フロントエンドからgraphql-requestを使って、データを取得・表示する（この記事） ・第５回 graphql-requestを使って、データを登録・修正・削除する GraphQLアクセスの中心となるcontainerファイルを作成 GET_PRODUCTSで、データをN件取得します。 実際には onLoadData 関数内で GET_PRODUCTSクエリで、GraphQL リクエストを行い、データをN件取得します。 Reduxの containerについてよくわからない場合は、みっちり予習してください。 [bash] $ nano containers/cproduct.js [/bash] [bash] import {connect} from “react-redux”; import {GraphQLClient} from “graphql-request”; import Product from “../components/product”; import {set_list_body, set_has_more} from “../actions/product”; const GET_PRODUCTS = ` query GetProducts ($offset: Int!, $limit: Int!){ getProducts(offset: $offset, limit: $limit){ has_more products { id product_name price } } } `; const HOST_ADDR = “http://localhost:4000”; let LIST_OFFSET = 0; let LIST_LIMIT = 100; const mapStateToProps = (state) => { return { list_body: state.product.list_body, has_more: state.product.has_more, } } const mapDispatchToProps = (dispatch) => { return { onInit: () => { LIST_OFFSET = 0; onLoadData(LIST_OFFSET, [], dispatch) }, onAddNew: (history) => { history.push(“/product/add/none”) }, onLoadMore: (list_body) => { onLoadData(LIST_OFFSET, list_body, dispatch) }, } } const onLoadData = (offset, list_body, dispatch) => { const client = createClient(); let variables = {offset: offset , limit: LIST_LIMIT}; client.request(GET_PRODUCTS, variables).then(data => { let newList = list_body; for (let i=0; i < data.getProducts.products.length; i++){ newList = newList.concat(data.getProducts.products[i]); } dispatch(set_list_body(newList)); LIST_OFFSET += LIST_LIMIT; dispatch(set_has_more(data.getProducts.has_more)); }) } const createClient =() => { const client = new GraphQLClient(HOST_ADDR + “/graphql”, { headers: { “x-token”: “test-test”, }, }); return client; } const CProduct = connect(mapStateToProps, mapDispatchToProps)(Product) export default CProduct [/bash] ページ表示時にデータをロードできるようにする ページを構成する product.jsファイルを編集し、componentDidMountから、 containerの onInitメソッドを呼び出すようにします。 [bash] $ nano components/product.js [/bash] componentDidMount　を追記します。 [bash] import React from “react”; import Menu from “./menu”; class Product extends React.Component { componentDidMount() { this.props.onInit(); } render(){ return ( This is Product ) } } export default Product; [/bash] App.jsの調整 コンテナファイルを作成しましたが、作成しただけでは利用されないので、 product.jsの代わりに、cproduct.jsを利用するように書き換えます。 [bash] $nano App.js [/bash] components/product.js ではなく、 コンテナ側の containers/cproduct.js を参照します。 [bash] import React from ‘react’; import {Router, Route} from “react-router-dom”; import history from ‘./history’; import Home from “./components/home”; import About from “./components/about”; import…

前回に続いて 前回までの記事でApolloServer配下でGraphQLが動作し、GraphQL APIというか、GraphQL クエリ言語で、商品テーブルのデータ登録、読み込みができるようになったので、今回はフロントエンドをReact+Reduxで組み始めるところを説明します。Reactはそれほどでもないのですが、Reduxのことをわかっていないとナンノコッチャよく分からんということになると思いますので、各自Reduxの予習はみっちりしてください。 この記事は５回に分けて連載する、第３回の記事です。 ・第１回 Apollo Serverが動くところまで ・第２回 Apollo Server配下で、GraphQLを使って商品マスターにアクセスする ・第３回 フロントエンドをReact＋Redux＋graphql-requestを使って実装する(この記事) ・第４回 フロントエンドからgraphql-requestを使って、データを取得・表示する ・第５回 graphql-requestを使って、データを登録・修正・削除する 完成形のファイルツリー 説明が下手で、どこのファイルをいじっているのかわかりにくくなると思うので、完成形のファイルツリーを表示しておきます。 フロントエンドプロジェクトの作成 create-react-app を使って、プロジェクトを作ります。 [bash] $ cd ~/workspace/graphql-master $ sudo npm install -g create-react-app $ create-react-app front [/bash] npm を使って必要なモジュールインストール [bash] $ cd front $ npm start $ npm install –save react-router-dom redux react-redux graphql-request [/bash] Reduxに必要なフォルダ構成を作成 [bash] $ mkdir src/actions $ mkdir src/components $ mkdir src/constants $ mkdir src/containers $ mkdir src/reducers $ mkdir src/sass [/bash] アプリケーションファイル App.jsを再定義 自動生成されたApp.jsを以下のように、ごっそり書き換えてください。 ルーティングにはreact-router-domを使い、 Home/About/Product（商品マスタ） の３画面構成にします。 [bash] $ nano App.js [/bash] [bash] import React from ‘react’; import {Router, Route} from “react-router-dom”; import history from ‘./history’; import Home from “./components/home”; import About from “./components/about”; import Product from “./components/product”; function App() { return ( GraphQL と Apollo Serverを使ったマスターメンテナンス ); } export default App; [/bash] App.jsに記述した諸々を定義 react-routerのヒストリーを管理するファイルです。 [bash] $ nano history.js [/bash] [bash] import { createBrowserHistory as createHistory } from ‘history’ export default createHistory() [/bash] ３画面共通のメニュー定義です。 [bash] $ nano components/menu.js [/bash] [bash] import React from “react” import {Link} from “react-router-dom”; class Menu extends React.Component { render() { return ( Home About Product ) } } export default Menu; [/bash] ホーム画面 [bash] $ nano componetns/home.js [/bash] [bash] import React from “react”; import Menu from “./menu”; class Home extends React.Component { render(){ return ( This is Home ) } } export default Home; [/bash] About画面 [bash] $ nano componetns/about.js [/bash] [bash] import React from “react”; import Menu from “./menu”; class About extends React.Component { render(){ return ( This is About ) } } export default About; [/bash] Product画面（商品マスターのメイン画面) [bash] $ nano componetns/product.js [/bash] [bash] import React from “react”; import Menu from “./menu”; class Product extends React.Component { render(){ return ( This is Product ) } } export default Product; [/bash] ここまでを動作確認 こんな感じに表示されれば、成功です。 Reduxのreducerを定義 ここからは　reduxの基礎知識がある前提で書き進めます。 ツライと思いますが、写経してください。 [bash] $ nano reducers/root.js [/bash] [bash] import {combineReducers} from “redux”; import product from “./Product/product”; const…

はじめに GraphQL使ってみたいなぁ。調べたところ、GraphQLをサーバーサイドで実装しているのはRubyとnodejs。検索結果の量で比べるとnodejsの方が多い。とくにApollo を使った記事が多い。 ということで、サーバーサイドはApolloでGraphQLを実装し、フロントもApollo Clientで、と行きたいところなのですが、私が調べて実際使ってみたところ、Apollo Client＋Reactは色々制約があって使いづらい。もう少し突っ込んで調べたところ、GraphQLサーバーに QueryとMutaionのリクエストを行える、graphql-requestという npmパッケージがあるのを見つけた。これを実際使ってみると、結構なレベルで思い通りにプログラミングできるようになったので、以下の組み合わせでGraphQLの練習として、商品マスターメンテナンスを組んでみたいと思う。 サーバーサイド Apollo Server + GraphQL + nodejs + sequelize フロントエンド React + Redux + graphql-request RESTと何かと比較され、RESTの次世代のGraphQLだと言われますが、実際にその正体を突き止められることを目指しています。私も、最初コーディングしてるときは、ちんぷんかんぷんでしたが、わかりだすとするすると理解が進みますし、GraphQLの良さも体感できます。 かなり長いですが、我慢してお付き合いください。 結構なボリュームなので、4回か5回に分けての連載になります。 ・第１回 Apollo Serverが動くところまで(この記事) ・第２回 Apollo Server配下で、GraphQLを使って商品マスターにアクセスする ・第３回 フロントエンドをReact＋Redux＋graphql-requestを使って実装する ・第４回 フロントエンドからgraphql-requestを使って、データを取得・表示する ・第５回 graphql-requestを使って、データを登録・修正・削除する まず、第一回はサーバーサイドのプロジェクトを作り、必要なnpm パッケージを導入し、 npm startで Apollo Serverが動くところまで。 ファイルの構成がわかりにくいと思うので、完成形のフォルダ構成を示しておきます。 サーバーサイドの準備 まずは開発フォルダを作成します。 [bash] $ mkdir ~/workspace $ mkdir ~/workspace/graphql-master $ mkdir ~/workspace/graphql-master/server $ cd ~/workspace/graphql-master/server [/bash] npmを使って、必要なパッケージ群をインストール [bash] $ npm init -y $ npm install –save apollo-datasource apollo-server dotenv graphql nodemon pg sequelize $ npm install –save-dev apollo apollo-link apollo-link-http babel-cli babel-plugin-transform-object-rest-spread babel-preset-env jest nock node-fetch [/bash] Apollo Serverを起動させるために サーバーサイドの中心となるファイル index.jsにApollo Serverを起動するための、あれこれを記述していきます。 以下、コンソールで、コマンドを記述してあるのは、基本、 プロジェクトルート/src ディレクトリをベースに記載します。 [bash] $ mkdir src $ cd src $ nano index.js [/bash] index.js (src/index.js) いろんなファイルをインクルードしていきます。これらのファイルはApollo ServerでGraphQLを動かすのに、必須なファイル群です。最初は意味がわからなくても、あぁ、こんなファイルがいるんだなと、感覚的に覚えるようにしてください。 schema　というのは、GraphQL APIの定義を書く場所です。 resolvers というのは、schema に記述したAPIの実装を書く場所です。 store というのは mysqlやpostgresql のデータストアの定義を書く場所です。 dataSources というのは、データベースの各テーブルに対するモデルをまとめるためのものです。 最後に server.listenで、nodejs サーバー（Apollo Server）を起動しています。 [bash] import {ApolloServer} from “apollo-server”; import typeDefs from “./schema”; import resolvers from “./resolvers”; import { createStore } from “./store”; const path = require(‘path’); require(‘dotenv’).config({ path: path.join(__dirname, ‘../.env’) }); const store = createStore(); const dataSources = () => ({ productAPI: new ProductAPI({store}), }); const server = new ApolloServer({ typeDefs, resolvers, }, context: async({req}) => { return { SECRET: process.env.SECRET, } }, dataSources, }); server.listen().then(({ url }) => { console.log(`GraphQL マスターメンテナンス Server ready at ${url}`); }); [/bash] .env(.env) 環境設定ファイルに、データベースへの接続設定とシークレットキーを定義します。 [bash] $ nano ../.env [/bash] [bash] DATABASE=graphql_dev DATABASE_USER=postgres DATABASE_PASSWORD=mypass SECRET=xz5y78fwfwefwekwfhyu.1856547.ffgxmz [/bash] このファイルはお決まりの魔法の言葉だ程度で覚えておいて、とりあえず、作ってください。 [bash] $ nano ../.babelrc [/bash] [bash] { “presets”: [ [ “env”, { “targets”: { “node”: “current” } } ] ], “plugins”: [“transform-object-rest-spread”] } [/bash] schema.js (src/schema.js) では GraphQL APIの定義を書いていく schema.jsです。 [bash] $ nano schema.js [/bash] とりあえず、Query と Mutationは 適当なものでごまかしておきます。（あとで修正します） [bash] import { gql } from “apollo-server”; export default gql` type Query { getProduct(id: Int!): Int! } type Mutation{ registerProduct(id: Int!): Int! } `; [/bash] resolvers.js (src/resolvers.js) では GraphQL APIの実装を書いていく resolvers.jsです。 とりあえず、空っぽの Query と Mutationを定義しておきましょう。 [bash] $ nano resolver.js [/bash] [bash] import…